<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Show Pictures</title>

    <link rel="shortcut icon" href="./images/favicon.jpg"/>
    <!-- Bootstrap -->
    <link href="./lib/bootstrap-3.3.5/dist/css/bootstrap.min.css" rel="stylesheet">
    <!--自己的css文件-->
    <link rel="stylesheet" href="./css/index.css"/>
    <!--<link rel="stylesheet" href="../css/movie.css"/>-->
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="./lib/html5shiv/html5shiv.min.js"></script>
    <script src="./lib/respond/respond.js"></script>
    <![endif]-->

    <style>

        body{
            background-image: none;
            margin: 0;
            padding:0;
        }
        #goHome{
            width: 100px;
            height: 40px;
            background-color: lightgreen;
            display: block;
            text-align: center;
            line-height: 40px;
            color: #FFFFFF;
            border-radius: 5px;
            position: absolute;
            right: 20px;
            top:0;
        }

        #goHome:hover{
            text-decoration: none;
        }
        #images {
            position: relative;
            width: 400px;
            height: 600px;
            margin: 300px 0px ;
        }

        #images img{
            position: absolute;
            top:0;
            left: 0;
            /*width: 100%;*/
            width: 400px;
            transform-origin: right top;

        }


    </style>
</head>
<body>
<a href="./index2.html" id="goHome">返回首页</a>

<div id="images">
    <img src="./image/xmjd/psb.jpg" alt=""/>
    <img src="./image/xmjd/psb1.jpg" alt=""/>
    <img src="./image/xmjd/psb2.jpg" alt=""/>
    <img src="./image/xmjd/psb3.jpg" alt=""/>
    <img src="./image/xmjd/psb4.jpg" alt=""/>
    <img src="./image/xmjd/psb5.jpg" alt=""/>
    <img src="./image/xmjd/psb6.jpg" alt=""/>
    <img src="./image/xmjd/psb7.jpg" alt=""/>
    <img src="./image/xmjd/psb8.jpg" alt=""/>
    <img src="./image/xmjd/psb9.jpg" alt=""/>
    <img src="./image/xmjd/psb10.jpg" alt=""/>
    <!--<img src="./image/xmjd/psb11.jpg" alt=""/>-->
    <!--<img src="./image/xmjd/psb12.jpg" alt=""/>-->
    <!--<img src="./image/xmjd/psb13.jpg" alt=""/>-->
    <!--<img src="./image/xmjd/psb14.jpg" alt=""/>-->
</div>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="./lib/jquery/jquery-1.12.2.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./lib/bootstrap-3.3.5/dist/js/bootstrap.min.js"></script>
<!--<script src="../js/index.js"></script>-->

<script>
   var images = $("img");
    for(var i = 0; i < images.length; i++){
        $("#images").on("mouseover",(function(n){
            var num = n;
            return function(){
                images[num].style.transform='rotate('+30 * num + 'deg)';
                images[num].style.transition='all 1s linear';

            }

        })(i));

        $("#images").on("mouseout",(function(n){
            var num = n;
            return function(){
                images[num].style.transform='rotate('+0 * num + 'deg)';
                images[num].style.transition='all 1s linear';

            }

        })(i));


    }

</script>

</body>
</html>